<template>
    <div class="container">
        <div class="form-box">
            <el-form :rules="rules" :model="form" label-width="80px">
                
                <el-tag>Head_list头部信息</el-tag>

                <el-text tag="b">头像信息</el-text>
                <el-upload
    ref="uploadRef"
    class="avatar-uploader"
    :action="host_img"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    
  >
    <img v-if="true" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
 
  </el-upload>
                <el-form-item label="服务天数" >
                    <el-input  v-model="form.head_list.serve_date"></el-input>
                </el-form-item>
                <el-form-item label="服务状态" prop="resource">
                  <el-radio-group v-model="form.head_list.serve_type">
                      <el-radio label="True" vlaue="1">服务中</el-radio>
                      <el-radio label="False" vlaue="2">休息</el-radio>
                     
                  </el-radio-group>
              </el-form-item>
                <el-form-item label="服务数量"  >
                    <el-input  v-model="form.head_list.serve_num"></el-input>
                </el-form-item>
                <el-form-item label="价格"  >
                    <el-input  v-model="form.head_list.price"></el-input>
                </el-form-item>
                <el-form-item label="定金"  >
                    <el-input  v-model="form.head_list.earnest"></el-input>
                </el-form-item>

                <!-- 证书展示 -->
                <el-tag>certificate_list证书展示</el-tag>
                <el-text tag="b">健康证</el-text>
                <el-upload  :on-success="handleAvatarSuccess2"  :action="host_img" list-type="picture-card" >
                   
                  </el-upload>
                
                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                <el-text tag="b">体检表</el-text>
                <el-upload :on-success="handleAvatarSuccess3"  :action="host_img" list-type="picture-card">
                  </el-upload>
                
                  <el-dialog v-model="dialogVisible2">
                    <img w-full :src="dialogImageUrl2" alt="Preview Image2" />
                  </el-dialog>
                <el-text tag="b">育婴证书</el-text>
                <el-upload :on-success="handleAvatarSuccess4"  :action="host_img" list-type="picture-card" >
                </el-upload>
              
                <el-dialog v-model="dialogVisible3">
                  <img w-full :src="dialogImageUrl3" alt="Preview Image3" />
                </el-dialog>



                <el-text tag="b" type="primary">Basic_list基本信息</el-text>
                <el-form-item label="姓名" prop="name" >
                    <el-input  v-model="form.basic_list.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input  v-model="form.basic_list.age"></el-input>
                </el-form-item>
                <el-form-item label="民族"  >
                    <el-input  v-model="form.basic_list.nation"></el-input>
                </el-form-item>
                <el-form-item label="住家情况"  >
                    <el-input  v-model="form.basic_list.home_type"></el-input>
                </el-form-item>
                <el-form-item label="学历"  >
                    <el-input  v-model="form.basic_list.education"></el-input>
                </el-form-item>
                <el-form-item label="婚姻状况"  >
                    <el-input  v-model="form.basic_list.marriage"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码"  >
                    <el-input  v-model="form.basic_list.id_card"></el-input>
                </el-form-item>
                <el-form-item label="属相"  >
                    <el-input  v-model="form.basic_list.zodiac"></el-input>
                </el-form-item>
                <el-form-item label="星座"  >
                    <el-input  v-model="form.basic_list.startsign"></el-input>
                </el-form-item>
                <el-form-item label="身高"  >
                    <el-input  v-model="form.basic_list.height"></el-input>
                </el-form-item>
                <el-form-item label="体重"  >
                    <el-input  v-model="form.basic_list.weight"></el-input>
                </el-form-item>
                <el-form-item label="月嫂水平" prop="resource">
                    <el-radio-group v-model="form.basic_list.level_id">
                        <el-radio label="1" vlaue="1">首席月嫂</el-radio>
                        <el-radio label="2" vlaue="2">金牌月嫂</el-radio>
                        <el-radio label="3" vlaue="3">资深月嫂</el-radio>
                        <el-radio label="4" vlaue="4">核心月嫂</el-radio>
                        <el-radio label="5" vlaue="5">骨干月嫂</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="所属门店"  >
                    <el-input  v-model="form.basic_list.department"></el-input>
                </el-form-item>
                <el-form-item label="户籍地址"  >
                    <el-input  v-model="form.basic_list.domicile"></el-input>
                </el-form-item>
                <el-form-item label="常住地址"  >
                    <el-input  v-model="form.basic_list.permanent"></el-input>
                </el-form-item>
                <el-form-item label="培训评价" prop="desc">
                    <el-input type="textarea" rows="5" v-model="form.basic_list.training"></el-input>
                </el-form-item>
                <el-form-item label="综合评价" prop="desc">
                    <el-input type="textarea" rows="5" v-model="form.basic_list.synthesis"></el-input>
                </el-form-item>

                <el-tag>work_list工作经历</el-tag>
                <el-table :data="tableData" style="width: 100%" max-height="250">
                    <el-table-column fixed prop="date" label="工作时间" width="150" ></el-table-column>
                    <el-table-column prop="name" label="工作内容" width="120" ></el-table-column>
                    <el-table-column prop="state" label="薪资" width="120" ></el-table-column>
                <el-table-column  #default="scope">
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click.prevent="deleteRow(scope.$index)"
                        >
                          删除
                        </el-button>
                     
                    </el-table-column>

                  </el-table>
                  <el-form-item label="工作时间" >
                    <el-input  rows="1" v-model="work_date" style="width: 150px;" ></el-input>
                  </el-form-item>
                  
                  <el-form-item label="工作内容">
                    <el-input  rows="1" v-model="work_work" style="width: 150px;" ></el-input>
                  </el-form-item>
                    
                    <el-form-item label="薪资" >
                        <el-input  rows="1" v-model="work_play" style="width: 150px;" >
                        </el-input></el-form-item>
                    
                <el-button class="mt-4" style="width: 100%" @click="onAddItem">添加</el-button>
                
                <!-- 家庭成员 -->
                <el-tag>family_list家庭成员</el-tag>
                <el-table :data="family_tableData" style="width: 100%" max-height="250">
                    <el-table-column prop="name" label="姓名" width="150" ></el-table-column>
                    <el-table-column prop="relations" label="关系" width="120" ></el-table-column>
                    <el-table-column prop="unit" label="工作单位" width="120" ></el-table-column>
                    <el-table-column prop="job" label="职务" width="120" ></el-table-column>
                <el-table-column  #default="scope">
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click.prevent="family_deleteRow(scope.$index)"
                        >
                          删除
                        </el-button>
                     
                    </el-table-column>

                  </el-table>
                  <el-form-item label="姓名" >
                    <el-input  rows="1" v-model="family_name" style="width: 150px;" ></el-input>
                  </el-form-item>
                  
                  <el-form-item label="关系">
                    <el-input  rows="1" v-model="family_relations" style="width: 150px;" ></el-input>
                  </el-form-item>
                    
                    <el-form-item label="工作单位" >
                        <el-input  rows="1" v-model="family_unit" style="width: 150px;" >
                        </el-input></el-form-item>
                        <el-form-item label="职务" >
                            <el-input  rows="1" v-model="family_job" style="width: 150px;" >
                            </el-input></el-form-item>
                    
                <el-button class="mt-4" style="width: 100%" @click="family_onAddItem">添加</el-button>
                <!-- 作品展示 -->
                <el-tag>display_list作品展示</el-tag>
                <el-upload :on-success="display_handleAvatarSuccess"  :action="host_img" list-type="picture-card">
                </el-upload>
              
                <el-dialog v-model="dialogVisible4">
                  <img w-full :src="dialogImageUrl4" alt="Preview Image4" />
                </el-dialog>


                  <el-form-item>
                    <el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
                    <el-button @click="onReset(formRef)">重置表单</el-button>
                </el-form-item>
            </el-form>
           
        </div>
    </div>
    <Text ></Text>
</template>

<script setup lang="ts" name="baseform">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { FormInstance, FormRules } from 'element-plus';
import  { UploadProps } from 'element-plus'
import { UploadInstance } from 'element-plus'
import axios from 'axios'
import Text from './text.vue'
const test_t=ref([
  {
    id:1,
    text:'好天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天',
  },
  {
    id:2,
    text:"天天天天天天天天天天天天天天天天天天天天"
  }
])
//相关证书

//import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import  { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const dialogImageUrl2 = ref('')
const dialogVisible2 = ref(false)
const disabled2 = ref(false)

const dialogImageUrl3 = ref('')
const dialogVisible3 = ref(false)
const disabled3 = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const form = reactive({
    head_list:{
      default_img:'',
    serve_date:'',
    serve_type:'',
    serve_num:'',
    price:'',
    earnest:'',
    },
    cercificate_list:[[],[],[]],

    basic_list:{name: '',
    age:'',
    nation:'',
    home_type:'',
    education:'',
    marriage:'',
    id_card:'',
    zodiac:'',
    startsign:'',
    height:'',
    weight:'',
    level_id:'',
    department:'',
    domicile:'',
    permanent:'',
    training:'',
    synthesis:'',},
    work_list:[],
    family_list:[],
    display_list:[]

});

const host=ref('http://43.139.56.134:8880/')
const host_img=ref('http://43.139.56.134:8000/admin/image/')
const host_post=ref('http://43.139.56.134:8000/admin/matron/')
//
const imageUrl = ref('')
//用户头像

  const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response)
  console.log(response.id)
  console.log(response.url)
  form['head_list']['default_img']={id:response.id,url:response.url}
  console.log(form)
  imageUrl.value = host.value+response.url
  console.log(imageUrl.value)
}
  //相关证书
  //健康证
  
    const handleAvatarSuccess2: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form['cercificate_list'][0].push(
    {id:response.id,url:response.url})
  
  console.log(form)
}
  //体检证
 
    const handleAvatarSuccess3: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form['cercificate_list'][1].push(
    {id:response.id,url:response.url})

  console.log(form)
}
  //育婴证

    const handleAvatarSuccess4: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form['cercificate_list'][2].push(
    {id:response.id,url:response.url})
  
  console.log(form)
}

  //作品展示
  
    const display_handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form['display_list'].push(
    {id:response.id,url:response.url})
  console.log(form)
}




const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false}
    //imageUrl.value = URL.createObjectURL(rawFile.raw!)
    // imageUrl.value = rawFile.URL
    // console.log(rawFile)
    // console.log('ok')
    return true
  }

  //表单
  const work_date=ref('')
  const work_work=ref('')
  const work_play=ref('')

const now = new Date()

const tableData = ref([
  {
    date: '2016-05-01',
    name: '服务员',
    state: '3000',
  },
 
])

const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    date: work_date.value,
    name: work_work.value,
    state: work_play.value,
  })
  work_date.value=''
  work_work.value=''
  work_play.value=''
}
//家庭关系
const family_name=ref('')
  const family_relations=ref('')
  const family_unit=ref('')
  const family_job=ref('')



const family_tableData = ref([
  {
    
    name: '张*',
    relations: '丈夫',
    unit:'第三小学',
    job:'厨师'
  },
 
])

const family_deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

const family_onAddItem = () => {
  
  family_tableData.value.push({
    
    name: family_name.value,
    relations:family_relations.value,
    unit:family_unit.value,
    job:family_job.value
  })
  family_unit.value=''
  family_relations.value=''
  family_name.value=''
  family_job.value=''
}
//作品展示
const dialogImageUrl4 = ref('')
const dialogVisible4 = ref(false)
const disabled4 = ref(false)


  //
const rules: FormRules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    age: [{ required: false, message: '请输入年龄' }],
};
const formRef = ref<FormInstance>();

// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
    // 表单校验
    form['work_list']=tableData.value
    form['family_list']=family_tableData.value
    console.log(form)
    axios.post(host_post.value,form,{
              headers: {
            'Content-Type': 'application/json'
          }
            })
            .then(e=>{
              console.log('ok')
              console.log(e)
            })
            .catch(e=>{
              console.log('error')
              console.log(e)
            })
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log(form);
            
            ElMessage.success('提交成功！');
        } else {
            return false;
        }
    });
};
// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>
<style >
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style >
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
